<template>
	<view class="xl-status-bar" :style="[style]">
		<slot />
	</view>
</template>

<script setup>
	import { computed, watch } from 'vue'
	const props = defineProps({
		// 如果插槽有内容，需要设置高度，可设置该值
		height: {
			type: [String, Number],
			default: ''
		},
		// 默认透明，可以颜色、渐变、图片
		background: {
			type: String,
			default: 'transparent'
		},
		// 状态栏字体颜色，只支持黑（#000000）和白（#ffffff）两种颜色。默认黑色
		fontColor:{
			type: String,
			default: '#000000'
		},
		// 层级
		zIndex: {
			type: [Number, String],
			default: 0,
		}
	})
	const style = computed(()=>{
		let styleObject = {
			paddingTop: uni.getWindowInfo().statusBarHeight + 'px',
			height: props.height ? uni.$xl.parseUnit(props.height, 'rpx') : 'auto'
		}
		if(uni.$xl.validate.image(props.background)){
			styleObject.background = `url(${props.background}) 0% 0% / 100% 100% no-repeat`;
		}else{
			styleObject.background = props.background;
		}
		if(props.zIndex) styleObject.zIndex = props.zIndex;
		return styleObject;
	})
	
	watch(() => props.fontColor, (newValue, oldValue) => {
		// #ifndef MP-TOUTIAO || H5
		uni.setNavigationBarColor({
			frontColor: newValue,
			backgroundColor: ''
		});
		// #endif
			
		// #ifdef MP-TOUTIAO
		if (tt.setNavigationBarColor) {
			tt.setNavigationBarColor({
				frontColor: newValue,
				backgroundColor: ''
			});
		} else {
			console.log("xl-navbar 提示：当前客户端版本过低，无法使用状态栏颜色修改功能，请升级。")
		}
		// #endif
	}, {immediate:true})
</script>

<style lang="scss" scoped>
	.xl-status-bar {
		// nvue会默认100%
		/* #ifndef APP-NVUE */
		width: 100%;
		/* #endif */
		position: relative;
	}
</style>